import React, { Component } from 'react'
import {Form,Input, Button, } from 'antd';
import styles from './register.less'

class register extends Component {
    
    handleSubmit=e=>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                const {email,password,confirmpassword}=values;
                //console.log(email,password,confirmpassword);
                if(password!==confirmpassword){
                    alert('两次输入的密码不一致，请重新输入');
                }
                else{
                    alert('注册成功');
                    window.location.href='/#/login'
                }
            }
        });
    } 
    render() {
        const {getFieldDecorator}=this.props.form;
        //实现数据双向绑定
        const required=true;
        return (
            <div className={styles.registerBox}>
                <div className={styles.image}>
                    <img src={require('../../assets/icon.png')}></img>
                </div>
                <div>
                    <Form className={styles.regform} onSubmit={this.handleSubmit} >
                        <Form.Item label="邮箱">
                            {getFieldDecorator('email',{
                                rules:[{
                                    required,
                                    message:'请输入邮箱'
                                },{
                                    type:"email",
                                    message:"请输入正确的邮箱格式，如754996539@qq.com"
                                }]
                            })(
                                <Input></Input>
                            )}
                        </Form.Item>
                        <Form.Item label="密码">
                            {getFieldDecorator('password',{
                                rules:[{
                                    required,
                                    message:'请输入密码'
                                }]
                            })(
                                <Input type='password'></Input>
                            )}
                        </Form.Item>
                        <Form.Item label="确认密码">
                            {getFieldDecorator('confirmpassword',{
                                    rules:[{
                                        required,
                                        message:'请确认输入密码'
                                    }]
                                })(
                                    <Input type='password'></Input>
                                )}
                        </Form.Item>
                        <Form.Item>
                            <Button type='primary' style={{width:'100%'}}
                              htmlType="submit">
                                注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
        </div>
        )
    }
}
export default Form.create()(register)